<template>
  <div class="inner-right">
    <slot name="header"></slot>
    <slot>
      <Card title="推荐主页">
        <div class="links">
          <a class="link" target="_blank" :href="item.url" v-for="item in links" :key="item.name"
             v-text="'#'+item.name"></a>
        </div>
      </Card>
      <Card title="热门文章" v-if="hot.length>0">
        <div class="list">
          <nuxt-link class="item" :to="{name:'topic-id',params:{id:item.id}}" v-for="item in hot" :key="item.id">
            {{ item.title }}
          </nuxt-link>
        </div>
      </Card>
      <slot name="simplepro">
        <nuxt-link :to="{name:'simplepro'}" target="_blank">
          <img class="verify" src="~/static/img/buy_pro.png" alt="购买Simple Pro">
        </nuxt-link>
      </slot>
      <Card title="等待回答" v-if="noAnswer.length>0">
        <div class="list">
          <nuxt-link class="item" :to="{name:'topic-id',params:{id:item.id}}" v-for="item in noAnswer" :key="item.id">
            {{ item.title }}
          </nuxt-link>
        </div>
      </Card>
      <slot name="verify">
        <nuxt-link :to="{name:'verify'}" target="_blank">
          <img class="verify" src="~/static/img/verify_ad.png" alt="认证申请">
        </nuxt-link>
      </slot>
    </slot>
  </div>
</template>

<script>
import Card from "./Card";
import config from "@/utils/config";

export default {
  name: "Right",
  components: {Card},
  computed: {
    hot() {
      return this.$store.state.hot;
    },
    noAnswer() {
      return this.$store.state.noAnswer;
    },
  },
  data() {
    return {
      links: [{
        name: '购买Pro',
        url: '/simplepro'
      }, {
        name: 'SimplePro配置教程',
        url: 'https://simpleui.72wo.com/docs/simplepro/setup.html'
      }, {
        name: '文档中心',
        url: '/topic/1300'
      }, {
        name: 'Pro在线体验',
        url: config.pro.demo
      }, {
        name: 'GitHub开源地址',
        url: 'https://github.com/newpanjing/simpleui'
      }]
    }
  }
}
</script>

<style scoped lang="less">
.inner-right {
  .verify {
    width: 90%;
    display: block;
    margin-right: auto;
    margin-left: auto;
    margin-top: 10px;
    border-radius: 5px;
    margin-bottom: 20px;
  }
}

.list {
  .item {
    display: block;
    margin: 10px 0;
    word-break: break-all;
    overflow: hidden;
    line-height: 25px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    text-overflow: ellipsis;
    font-size: 14px;

    &:before {
      content: "\2022";
      color: #ccc;
      font-weight: 700;
      width: 1em;
      float: left;
    }
  }
}

.links {
  margin-top: 20px;

  .link {
    margin-bottom: 9px;
    display: inline-block;
    margin-right: 9px;
    padding: 6px 15px;
    background-color: var(--link-bg);
    border-radius: 4px;
    color: var(--color);
    font-size: 14px;
    cursor: pointer;
    transition: all .2s;

    &:hover {
      color: var(--primary);
      background-color: rgba(var(--link-bg), .9);
    }
  }
}
</style>
